<template>
  <div class="none" v-if="data.data.length === 0">抓紧抢沙发</div>
  <div v-else>
    <el-row
      class="comment-item"
      v-for="(item, index) in data.data"
      :key="index"
    >
      <el-col class="comment-user" :span="24">
        <el-row type="flex">
          <el-col class="avatar-box" :span="24">
            <img
              :src="$axios.defaults.baseURL + item.account.defaultAvatar"
              width="40"
              alt=""
            />
          </el-col>
          <el-col class="nickname-box" :span="24">
            <p class="nickname">{{ item.account.nickname }}</p>
            <p class="user-level">LV.{{ Math.floor(Math.random() * 100) }}</p>
          </el-col>
        </el-row>
        <el-row class="timestamp">2020-10-12</el-row>
      </el-col>
      <el-row class="comment-content">
        <div>
          <div class="pics">
            <ul>
              <li v-for="(v, i) in item.pics" :key="i">
                <img :src="$axios.defaults.baseURL + v.url" alt="" />
              </li>
            </ul>
          </div>
          <div>{{ item.content }}</div>
        </div>
        <div class="reply-box">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea[index]"
            style="max-height: 33px"
            resize="none"
          >
          </el-input>
          <div class="reply-btn">
            <el-button type="primary" @click="sendId(item.id, index)"
              >回复</el-button
            >
          </div>
        </div>
        <CommentItem v-if="item.followed.length > 0" :data="item.followed" />
      </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      textarea: []
    };
  },
  mounted() {
    console.log(this.data);
  },
  methods: {
    sendId(id, index) {
      // console.log(id);
      this.$emit('sendId', { id, str: this.textarea[index] });
      this.textarea.length = 0;
    }
  }
};
</script>

<style lang="less" scoped>
.none {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  background-color: #eee;
}
.comment-item {
  border-top: 1px dashed #eee;
  padding: 20px 0;
  margin-top: 10px;
  .comment-user {
    width: 110px;
    .nickname-box {
      .nickname {
        color: #fa3;
      }
      .user-level {
        font-size: 12px;
        color: #f30;
        margin-top: 6px;
      }
    }
    .timestamp {
      color: #666;
      font-size: 14px;
    }
    img {
      display: inline-block;
      border-radius: 50%;
      border: 2px solid #fa3;
    }
  }
  .comment-content {
    overflow: hidden;
    color: #666;
    .pics {
      ul {
        display: flex;
        li {
          padding-right: 16px;
        }
      }
      img {
        width: 100px;
      }
    }
    .reply-box {
      margin-top: 10px;
      /deep/.el-textarea__inner {
        height: 33px;
      }
      .reply-btn {
        margin-top: 10px;
        text-align: right;
      }
    }
  }
}
</style>
